<template>
  <div class="ranking-container" style="height: 280px; width: 500px; background-color: #0f2035; font-family: 'Microsoft YaHei', sans-serif;">
    <!-- 标题栏 -->
    <div class="title-bar">
      <div class="icon"></div>
      <h2>业务饱和排行榜</h2>
    </div>

    <!-- 表格主体 -->
    <div class="table-wrapper">
      <!-- 表头 -->
      <div class="table-header">
        <div class="header-item">服务事项</div>
        <div class="header-item">饱和值</div>
        <div class="header-item">占比</div>
        <div class="header-item">平均等待时长</div>
      </div>

      <!-- 表格内容 -->
      <div class="table-body">
        <div class="table-row">
          <div class="row-item">
            <div class="item-icon star"></div>
            <span>服务事项A</span>
          </div>
          <div class="row-item">
            <div class="progress-bar">
              <div class="bar-fill red" style="width: 90%"></div>
            </div>
          </div>
          <div class="row-item">90%</div>
          <div class="row-item">15 min</div>
        </div>
        <div class="table-row">
          <div class="row-item">
            <div class="item-icon user"></div>
            <span>服务事项B</span>
          </div>
          <div class="row-item">
            <div class="progress-bar">
              <div class="bar-fill orange" style="width: 80%"></div>
            </div>
          </div>
          <div class="row-item">80%</div>
          <div class="row-item">15 min</div>
        </div>
        <div class="table-row">
          <div class="row-item">
            <div class="item-icon medal"></div>
            <span>服务事项C</span>
          </div>
          <div class="row-item">
            <div class="progress-bar">
              <div class="bar-fill yellow" style="width: 60%"></div>
            </div>
          </div>
          <div class="row-item">60%</div>
          <div class="row-item">15 min</div>
        </div>
        <div class="table-row">
          <div class="row-item">
            <div class="item-icon idcard"></div>
            <span>服务事项D</span>
          </div>
          <div class="row-item">
            <div class="progress-bar">
              <div class="bar-fill lightblue" style="width: 40%"></div>
            </div>
          </div>
          <div class="row-item">40%</div>
          <div class="row-item">15 min</div>
        </div>
        <div class="table-row">
          <div class="row-item">
            <div class="item-icon flag"></div>
            <span>服务事项E</span>
          </div>
          <div class="row-item">
            <div class="progress-bar">
              <div class="bar-fill blue" style="width: 30%"></div>
            </div>
          </div>
          <div class="row-item">30%</div>
          <div class="row-item">15 min</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BusinessSaturationRanking'
}
</script>

<style scoped>
.ranking-container {
  box-sizing: border-box;
  padding: 10px;
  color: #fff;
}

.title-bar {
  display: flex;
  align-items: center;
  background-color: #2c5aa0;
  padding: 8px 15px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.icon {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zm0 18.55l-10-5v-2.91l10 5 10-5v2.91l-10 5z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 16px;
  margin-right: 8px;
}

.title-bar h2 {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}

.table-wrapper {
  width: 100%;
}

.table-header {
  display: flex;
  background-color: #2c5aa0;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.header-item {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.header-item:nth-child(1) { width: 120px; }
.header-item:nth-child(2) { width: 120px; }
.header-item:nth-child(3) { width: 100px; }
.header-item:nth-child(4) { width: 160px; }

.table-body {
  background-color: #1a3558;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #0f2035;
}

.row-item {
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.row-item:nth-child(1) { 
  width: 120px; 
  display: flex;
  align-items: center;
  gap: 8px;
}
.row-item:nth-child(2) { width: 120px; }
.row-item:nth-child(3) { width: 100px; }
.row-item:nth-child(4) { width: 160px; }

.item-icon {
  width: 16px;
  height: 16px;
}

.star {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffcc00'%3E%3Cpath d='M12 0L14.12 5.46L20 6.19L16.26 10.96L17.09 16.83L12 14.59L6.91 16.83L7.74 10.96L4 6.19L9.88 5.46L12 0Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px;
}

.user {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ccc'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px;
}

.medal {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4af37'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L9 8.26L12 2Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px;
}

.idcard {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2338bdf8'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l2-2h8v2zm0-6H6l2-2h8v2zm0-4H6l2-2h8v2zm0-4H6l2-2h8v2z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px;
}

.flag {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2399ccff'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 11 8.9 11 10c0 1.66 1.34 3 3 3 .99 0 1.87-.35 2.5-.88l.2.01zm-3.8-5.12c-.94 0-1.7-.76-1.7-1.7s.76-1.7 1.7-1.7 1.7.76 1.7 1.7-.76 1.7-1.7 1.7z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #444;
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
}

.red { background-color: #e53935; }
.orange { background-color: #f59e0b; }
.yellow { background-color: #fde047; }
.lightblue { background-color: #34d399; }
.blue { background-color: #38bdf8; }
</style>